import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.less'
import { Swiper, SwiperSlide } from 'swiper/react';
import doubleArrowRight from './right.png'
import doubleArrowLeft from './left.png'
import RcViewer from '@hanyk/rc-viewer'
import { useIntl } from 'umi';
function Index() {
  const [mySwiper, setMySwiper] = useState()　　　　　　//swiper实例
  const [selectIndex, setSelectIndex] = useState()
  const intl = useIntl();


  useMemo(() => {
    // SwiperCore.use([Autoplay, Pagination])
  }, [])

  // const data = new Array(11).fill('').map((_, i) => ({
  //   img: require(`../../../assets/boothLayout/img${i}.jpg`)
  // }))
  function getImg(name) {
    return require(`../../../assets/boothLayout/${name}.jpg`)
  }
  const data = [
    {
      name:intl.formatMessage({id:'EXHIBITION_HALL_LAYOUT'}),
      img: getImg("img0"),
    },
    {
      name:intl.formatMessage({id:'W1'}),
      img: getImg("img1"),
    },
    {
      name:intl.formatMessage({id:'W2'}),
      img: getImg("img2"),
    },
    {
      name:intl.formatMessage({id:'W3'}),
      img: getImg("img3"),
    },
    {
      name:intl.formatMessage({id:'E1'}),
      img: getImg("img4"),
    },
    {
      name:intl.formatMessage({id:'E2'}),
      img: getImg("img5"),
    },
    {
      name:intl.formatMessage({id:'E3'}),
      img: getImg("img6"),
    },
    {
      name:intl.formatMessage({id:'E4'}),
      img: getImg("img7"),
    },
    {
      name:intl.formatMessage({id:'E5'}),
      img: getImg("img8"),
    },
    {
      name:intl.formatMessage({id:'E6'}),
      img: getImg("img9"),
    },
    {
      name:intl.formatMessage({id:'E7'}),
      img: getImg("img10"),
    },
  ]

  let title1 = '';
  let title2 = '';
  // console.log(selectIndex, 'selectIndex')
  if (data && data.length > 0) {
    if (((selectIndex + 1) <= (data.length - 1)) && ((selectIndex - 1) >= 0)) {
      title1 = data[selectIndex - 1].name
      title2 = data[selectIndex + 1].name
    }
    if (selectIndex == 0) {
      title1 = data[data.length - 1].name
      title2 = data[1].name
    }

    if (selectIndex == (data.length - 1)) {
      title1 = data[data.length - 1].name
      title2 = data[0].name
    }
  }

  return (
    <div className={styles.box} id={'newSwiper'}>
      <Swiper
        spaceBetween={0}
        slidesPerView={1}
        onSlideChange={(e) => {
          setSelectIndex(e.activeIndex)
        }}
        onSwiper={(swiper) => {
          setMySwiper(swiper)        //在创建swiper实例的时候，保存到全局变量
          setSelectIndex(swiper.activeIndex)
        }}
      >
        {
          data && data.map((item, index) => {
            return <SwiperSlide key={`swiper${index}`}>
              <div className={`${styles.swiperItemBox} ${styles.swItem1}`}>
                <RcViewer options={{ navbar: false, toolbar: false }}>
                  <img className={styles.img} src={item.img} ></img>
                </RcViewer>
              </div>

            </SwiperSlide>
          })
        }
      </Swiper>
      <div className={styles.swiperNavBox}>
        <div className={styles.navItem}>
          <img className={styles.icon} src={doubleArrowLeft} onClick={() => { mySwiper.slideNext() }}></img>
          <span>{title1}</span>
        </div>
        <div className={styles.navItem} style={{ alignItems: "flex-end" }}  onClick={() => { mySwiper.slidePrev() }} >
          <img className={styles.icon} src={doubleArrowRight} ></img>
          <span>{title2}</span>
        </div>
      </div>
    </div>
  )
}

export default Index
